<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col style="width: 260px;padding-top: calc(35vh)">
        <div style="line-height: 100px;font-size: 20px;">修改密码</div>

        <el-form :model="forgotrule" :rules="frule" ref="forgotrule" class="demo-ruleForm">
          <el-form-item prop="userPhone">
            <el-input size="medium" v-model="forgotrule.userPhone" auto-complete="off" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input type="password" v-model="forgotrule.code" auto-complete="off" size="medium" placeholder="请输入验证码">
              <el-button @click="sendcode()" slot="suffix" style="height: 80%;margin-top: 4px;" type="primary">
                {{btntxt}}
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item prop="userPassword">
            <el-input type="password" v-model="forgotrule.userPassword" auto-complete="off" size="medium"
                      placeholder="请输入新密码">
            </el-input>
          </el-form-item>
          <el-form-item style="text-align: left">
            <el-button @click="submitForm('forgotrule')" size="medium" style="width: 100%;" type="primary">确认修改
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>


</template>

<script>
  export default {
    name: "ForgotPwd",
    data() {
      return {
        disabled: false,
        time: 0,
        btntxt: "获取验证码",
        forgotrule: {
          userPhone: '',
          code: '',
          userPassword: '',
        },
        frule: {
          userPhone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
          ],
          code: [
            {required: true, message: '请输入验证码', trigger: 'blur'}
          ],
          userPassword: [
            {required: true, message: '请输入新密码', trigger: 'blur'}
          ],
        }


      }
    },
    methods: {
      sendcode() {
        let thi = this
        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        if (thi.forgotrule.userPhone == '') {
          thi.$message('请输入手机号');
        } else if (!reg.test(thi.forgotrule.userPhone)) {
          console.log(thi.forgotrule.userPhone)
          thi.$message('手机号格式不对');
        } else {
          thi.time = 60;
          thi.disabled = true;
          thi.timer();
          thi.fullscreenLoading = true
          console.log(thi.forgotrule.userPhone)
          var userPhone = '' + thi.forgotrule.userPhone + ''
          thi.$http.post(global.posturl.host + global.posturl.getBsCode, {
            userPhone: userPhone
          }).then(function (response) {
            thi.fullscreenLoading = false
            console.log(response)
            var qmsg = response.data.msg
            var qcode = response.data.code
            if (qcode === 200) {
              thi.$message({
                message: '发送验证码成功',
                type: 'success',
                duration: 5000
              });
            } else {
              thi.$message({
                message: qmsg,
                type: 'error',
                duration: 5000
              });
            }
          }).catch(function (error) {
            console.log(error)
            console.log('123')
          });
        }
      },
      timer() {
        if (this.time > 0) {
          this.time--;
          this.btntxt = this.time + "s后重新获取";
          setTimeout(this.timer, 1000);
        } else {
          this.time = 0;
          this.btntxt = "发送验证码";
          this.disabled = false;
        }
      },
      gohref(name) {
        this.$router.push({name: name})
      },
      submitForm(formName) {
        let thi = this
        thi.$refs[formName].validate((valid) => {
          if (valid) {
            thi.fullscreenLoading = true
            console.log(thi.$refs[formName].model)
            thi.$http.post(global.posturl.host + global.posturl.jfBusinessCheckPhoneCode,
              thi.$refs[formName].model
            ).then(function (response) {
              console.log(response.data)
              var qcode = response.data.code
              var qmsg = response.data.msg
              var qdata = response.data.data
              thi.fullscreenLoading = false
              if (qcode == 200 || qcode == 201) {
                thi.$message({
                  message: '修改成功前往登录',
                  type: 'success',
                });
                thi.gohref('login')
              } else {
                thi.$message({
                  message: qmsg,
                  type: 'error',
                  duration: 5000
                });
              }
            }).catch(function (error) {
              console.log(error)
              console.log('123')
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

    },
  }
</script>

<style scoped>

</style>
